<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>天天生鲜-购物车</title>
    <link rel="stylesheet" type="text/css" href="/static/css/reset.css">
    <link rel="stylesheet" type="text/css" href="/static/css/main.css">
</head>
<body>

{% include 'base.html' %}

<div class="search_bar clearfix">
    <a href="{% url 'user:index' %}" class="logo fl"><img src="/static/images/logo.png"></a>
    <div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;购物车</div>
    <div class="search_con fr">
        <input type="text" class="input_text fl" name="" placeholder="搜索商品">
        <input type="button" class="input_btn fr" name="" value="搜索">
    </div>
</div>

<div class="total_count">全部商品<em>{{ sum }}</em>件</div>
<ul class="cart_list_th clearfix">
    <li class="col01">商品名称</li>
    <li class="col02">商品单位</li>
    <li class="col03">商品价格</li>
    <li class="col04">数量</li>
    <li class="col05">小计</li>
    <li class="col06">操作</li>
</ul>



{% for i in data %}
    <ul class="cart_list_td clearfix">

        <li class="col01"><input type="checkbox" name="" checked></li>
        <li class="col02"><img src="/static/images/{{ i.c_goods.photo }}"></li>
        <li class="col03">{{ i.c_goods.name }}<br><em>{{ i.c_goods.price }}元/kg</em></li>
        <li class="col04">{{ i.c_count }}kg</li>
        <li class="col05" id="price">{{ i.c_goods.price }}</li>
        <br>
        <li class="col06">
            <div class="num_add">
                <a href="javascript:;" class="add fl">+</a>
                <input type="text" cart_id="{{ i.id }}" class="num_show fl" value="{{ i.c_count }}">
                <a href="javascript:;" class="minus fl">-</a>
            </div>
        </li>
        <li class="col07" id="{{ i.id }}">{{ i.amount }}元</li>
        <li class="col08"><a href="javascript:;">删除</a></li>

        <br>
    </ul>
{% endfor %}


<ul class="settlements">

    {% csrf_token %}
    <li class="col01"><input type="checkbox" name="" checked=""></li>
    <li class="col02">全选</li>
    <li class="col03">合计(不含运费)：<span>¥</span><em>{{ sumprice }}</em><br>共计<b>{{ sum }}</b>件商品</li>
    <li class="col04"><a href="place_order.html">去结算</a></li>
</ul>

<div class="footer">
    <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
    <p>电话：010-****888 京ICP备*******8号</p>
</div>


<script type="text/javascript" src="/static/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">

    //计算被选中的商品的总件数和总价格
    function update_page_info() {
        //获取所有被选中商品的checkbox
        //获取所有被选中的商品所在的ul元素
        total_count = 0;
        total_price = 0;
        $(".cart_list_td").find(":checked").parents('ul').each(function () {
            //获取商品的数目和小计
            count = $(this).find(".num_show").val()
            amount = $(this).children('.col07').text()
            //计算商品的总件数和总价格
            count = parseInt(count)
            amount = parseFloat(amount)
            total_count += count
            total_price += amount
        })
        //钱
        $('.settlements').find('em').text(total_price.toFixed(2))
        //件
        $('.settlements').find('b').text(total_count)
    }

    //计算商品的小计
    function update_goods_amount(cart_ul) {
        count = cart_ul.find('.num_show').val()
        price = cart_ul.children('.col05').text()
        //计算商品小计
        amount = parseInt(count) * parseFloat(price)
        //设置商品的小计
        cart_ul.children('.col07').text(amount.toFixed(2) + '元')
    }

    //商品的全选全不选
    $('.settlements').find(':checkbox').change(function () {
        //获取全选的checkbox的选中状态
        is_checked = $(this).prop('checked')
        //遍历商品的对应的checkbox，设置CheckBox的选中状态和全选的checkbox保持一致
        $('.cart_list_td').find(':checkbox').each(function () {
            $(this).prop('checked', is_checked)
        })
        //更新页面信息
        update_page_info()
    })

    //商品的checkbox状态发生改变，设置全选checkbox的状态
    $('.cart_list_td').find(':checkbox').change(function () {
        //获取页面上所有商品的数目
        all_len = $('.cart_list_td').length
        //获取页面上商品被选中的数目
        checked_len = $('.cart_list_td').find(':checked').length
        if (checked_len < all_len) {
            $('.settlements').find(':checkbox').prop('checked', false)
        } else {
            $('.settlements').find(':checkbox').prop('checked', true)
        }
        //更新页面信息
        update_page_info()
    })

    //购物车数量的增加
    $('.add').click(function () {
        //获取商品的id和商品的数量
        count = $(this).next().val()
        cart_id = $(this).next().attr('cart_id')
        //组织参数
        count = parseInt(count) + 1
        params = {'count': count, 'cart_id': cart_id}
        //发起ajax post请求，访问/
        error_update = false
        total = 0;
        //设置ajax为同步
        $.ajaxSettings.async = false
        //默认的ajax请求都是异步的，不会等回调函数执行
        $.post('/carts/update_cart/', params, function (data) {
            if (data.res == 1) {
                error_update = false
                total = data.all_c
            } else {
                error_update = true
                alert('更新失败')
            }
        })
        //设置ajax请求为异步
        $.ajaxSettings.async = true
        //判断更新是否成功
        if (error_update == false) {
            //重新设置商品的数目
            $(this).next().val(count)
            //计算商品的小计
            update_goods_amount($(this).parents('ul'))
            //获取商品对应的checkbox状态
            is_checked = $(this).parents('ul').find(':checkbox').prop('checked')
            if (is_checked) {
                //更新页面信息
                update_page_info()
            }
            //更新购物车页面上的总件数
            $('.total_count').find('em').text(total)

        }
    })

    //购物车数量的减少
    $('.minus').click(function () {
        //获取商品的id和商品的数量
        count = $(this).prev().val()
        cart_id = $(this).prev().attr('cart_id')
        //组织参数
        count = parseInt(count) - 1
        if (count <= 0) {
            return
        }
        params = {'count': count, 'cart_id': cart_id}
        //发起ajax post请求，访问/
        error_update = false
        total = 0;
        //设置ajax为同步
        $.ajaxSettings.async = false
        //默认的ajax请求都是异步的，不会等回调函数执行
        $.post('/carts/update_cart/', params, function (data) {
            if (data.res == 1) {
                error_update = false
                total = data.all_c
            } else {
                error_update = true
                alert('更新失败')
            }
        })
        //设置ajax请求为异步
        $.ajaxSettings.async = true
        //判断更新是否成功
        if (error_update == false) {
            //重新设置商品的数目
            $(this).prev().val(count)
            //计算商品的小计
            update_goods_amount($(this).parents('ul'))
            //获取商品对应的checkbox状态
            is_checked = $(this).parents('ul').find(':checkbox').prop('checked')
            if (is_checked) {
                //更新页面信息
                update_page_info()
            }
            //更新购物车页面上的总件数
            $('.total_count').find('em').text(total)

        }
    })

    //购物车的删除
    $('.cart_list_td').children('.col08').children('a').click(function () {
        cart_id = $(this).parents('ul').find('.num_show').attr('cart_id')
        params = {'cart_id': cart_id}
        cart_ul = $(this).parents('ul')
        $.post('/carts/cart_delete/', params, function (data) {
            if (data.res == 1) {
                //删除成功，移除页面的元素
                cart_ul.remove()
                //获取选择状态
                is_checked = cart_ul.find(':checkbox').prop('checked')
                if (is_checked) {
                    update_page_info()
                }
                {#//重新设置商品的总件数#}
                {#$('.total_count').children('em').text(data.all_c)#}
            }
        })
    })

</script>

</body>
</html>